<!--
 * @Author: wuyang
 * @Description: 注册组件
 * @Date: 2023-01-05 14:26:14
 * @LastEditors: wuyang
 * @LastEditTime: 2023-01-07 14:33:04
 * @FilePath: \vue3-graduate\src\views\login\components\register.vue
-->
<template>
  <div>
    <!-- 登录表单 -->
    <el-form :model="loginForm" :rules="registerRules" ref="ruleFormRef">
      <Motion :delay="100">
        <!-- 账号 -->
        <el-form-item prop="username">
          <el-input v-model="loginForm.username" placeholder="账号" clearable>
            <template #prefix>
              <svg-icon icon-class="login-account" class="login-iconSize" />
            </template>
          </el-input>
        </el-form-item>
      </Motion>
      <Motion :delay="150">
        <!-- 邮箱 -->
        <el-form-item prop="email">
          <el-input v-model="loginForm.email" placeholder="邮箱" clearable>
            <template #prefix>
              <svg-icon icon-class="login-email" class="login-iconSize" />
            </template>
          </el-input>
        </el-form-item>
      </Motion>
      <Motion :delay="200">
        <!-- 验证码 -->
        <el-form-item prop="captcha" class="phoneCode">
          <el-input v-model="loginForm.captcha" placeholder="6位验证码" clearable>
            <template #prefix>
              <svg-icon icon-class="login-captcha" class="login-iconSize" />
          </template>
        </el-input>
        <el-button type="primary" plain size="large" class="btn-green" @click="getCaptcha"
          :loading="captchaLoading">获取验证码</el-button>
      </el-form-item>
    </Motion>

    <!-- <Motion :delay="150">
        <el-form-item prop="phone" >
          <el-input
            v-model="loginForm.phone"
            placeholder="手机号"
                        clearable
                                          >
            <template #prefix>
              <svg-icon icon-class="login-phone" class="login-iconSize" />
            </template>
          </el-input>
        </el-form-item>
      </Motion> -->

    <!-- <Motion :delay="200">
        <el-form-item prop="captcha" class="phoneCode">
          <el-input
            v-model="loginForm.captcha"
            placeholder="验证码"
            clearable
                        >
                          <template #prefix>
                            <svg-icon icon-class="login-captcha" class="login-iconSize" />
                          </template>
                        </el-input>
                        <el-button type="primary" plain size="large">获取验证码</el-button>
                      </el-form-item>
                    </Motion> -->

      <Motion :delay="250">
        <!-- 密码 -->
        <el-form-item prop="password1">
          <el-input v-model="loginForm.password1" placeholder="密码" type="password" clearable show-password>
            <template #prefix>
              <svg-icon icon-class="login-password" class="login-iconSize" />
            </template>
          </el-input>
        </el-form-item>
      </Motion>

      <Motion :delay="300">
        <!-- 确认密码 -->
        <el-form-item prop="password2">
          <el-input v-model="loginForm.password2" placeholder="确认密码" type="password" clearable show-password>
            <template #prefix>
            <svg-icon icon-class="login-password" class="login-iconSize" />
          </template>
        </el-input>
      </el-form-item>
    </Motion>


    <!-- <Motion :delay="350">
        <el-form-item >
                            <div class="flex items-center justify-start w-full">
                              <el-checkbox :model-value="loginForm.havingRead"
                                >我已仔细阅读并接受</el-checkbox
                              >
                              <span :style="{ color: '#459FFC' }">《隐私政策》</span>
                            </div>
                          </el-form-item>
                        </Motion> -->

      <Motion :delay="350">
        <!-- 确定按钮 -->
        <el-form-item>
          <el-button type="primary" class="w-full btn-green" @click="handleRegister"> 注册 </el-button>
        </el-form-item>
      </Motion>

      <Motion :delay="400">
        <!-- 返回按钮 -->
        <el-form-item>
          <el-button class="w-full btn-white" @click="useUserStoreHook().SET_CURRENTPAGE(0)">
            返回
          </el-button>
        </el-form-item>
      </Motion>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
// 注册验证规则
import { registerRules } from "../utils/rules";
// hook
import { useUserStoreHook } from "@/store/modules/user";
import { email } from '@/api/user'
// 过渡动画
import Motion from "../utils/motion";
import { register } from '@/api/user'
import { REGEXP_EMAIL } from '../utils/rules'

// 表单数据
const loginForm = reactive({
  username: "",
  email: "",
  phone: "",
  captcha: "",
  password1: "",
  password2: "",
  havingRead: false,
  emailCaptcha: ''
});
let captchaLoading = ref(false)

/**
 * 注册
 */
const handleRegister = () => {
  if (loginForm.username.trim() && loginForm.password1.trim() && loginForm.password2.trim()) {
    if (loginForm.password1.trim() === loginForm.password2.trim()) {
      const registerForm = {
        username: loginForm.username.trim(),
        password: loginForm.password1.trim(),
        email: loginForm.email.trim(),
        captcha: loginForm.captcha.trim(),
        emailCaptcha: loginForm.emailCaptcha.trim(),
      }
      register(registerForm).then((res) => {
        if (Number(res.code) === 200) {
          ElMessage({
            type: "success",
            message: "注册成功"
          })
          useUserStoreHook().SET_CURRENTPAGE(0)
        } else {
          ElMessage({
            type: "error",
            message: "注册失败"
          })
        }
      })
    } else {
      ElMessage({
        type: "warning",
        message: "两次输入的密码不一致"
      })
    }
  } else {
    ElMessage({
      type: "warning",
      message: "请将表单填写完整"
    })
  }
}

// 获取验证码
const getCaptcha = () => {
  captchaLoading.value = true
  if (REGEXP_EMAIL.test(loginForm.email)) {
    email({ user_email: loginForm.email }).then((res) => {
      loginForm.emailCaptcha = res.data
      ElMessage({
        message: "发送验证码成功",
        type: "success",
      });
    })
    captchaLoading.value = false

  } else {
    captchaLoading.value = false
    console.log("邮箱格式不正确")
    ElMessage({
      message: "邮箱格式不正确",
      type: "warning",
    });
  }
}
</script>
